<template>
  <div class="index">
    <swipe></swipe>
    <item></item>
    <div class="recommend">
      <h3>每日推荐</h3>
      <div class="recommend_img">
          <img src="./images/first/share1.png" alt="" class="Img">
          <div class="recommend_text">
            <p class="what">今天吃什么？</p>
            <p>根据星座计算属于您的开运菜</p>
            <p><button>去算算看 >></button></p>
          </div>
      </div>
    </div>
    <!-- 主要模块 -->
    <main-text :MainList="List" title="节气养生">
      <template #author>
        <div class="author">
          <img src="./images/first/icon1.png" alt="">  
          <p>葡萄女王</p>
        </div>
      </template>
      <template #MainText>
          <div class="mainText">
            秋季 丨 低脂养生餐
          </div>
      </template>
    </main-text>
    <main-text :MainList="List" title="帮厨说说">
      <template #author>
        <div class="author">
          <img src="./images/first/icon1.png" alt="">  
          <p>我爱我家</p>
        </div>
      </template>
      <template #MainText>
          <div class="mainText">
            摩飞 丨 厨房用具
          </div>
      </template>
    </main-text>
  </div>
</template>

<script>
import Pubhead from "@/components/Pubhead";
import swipe from "./first-swipe";
import item from "./first-item";
import mainText from './first-main'
import footbar from "@/components/tabbar"
export default {
  components: {
    Pubhead,swipe,item,mainText,footbar
  },
  data(){
    return {
      List:[require("./images/first/share2.png"),
      require("./images/first/share1.png"),
      require("./images/first/share2.png"),
      require("./images/first/share1.png"),
      require("./images/first/share2.png"),
      require("./images/first/share1.png")]
    }
  }
};
</script>

<style scoped lang="less">

.recommend{
   text-align: center;
  h3{
    text-align: left;
    padding-left: .2rem;
  }
.recommend_img{
    width: 100%;
    position: relative;
    border-radius:.6rem ;
    overflow: hidden;

    .Img{
      width: 100%;
    }
    .recommend_text{
      width: 100%;
      height: 100%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      color: white;
      background: rgba(56, 55, 55,.5);
      p{
        font-size: .4rem;
        font-weight: bold;
      }
      .what{
        font-size: .5rem;
        font-weight: bold;
      }
      button{
        background: #f4d02b;
        border: none;
        outline: none;
        border-radius:5px;
        padding: .1rem .2rem;
      }
    }
  }
}
  
</style>